function getCharts(id, type) {
  var myChart = echarts.init(document.getElementById(id));
  var data2 = [42000, 83000, 61000, 92000, 43000, 88000, 78000];
  var data3 = [4000, 5000, 1800, 7000, 8800, 6500, 1900];
  var data4 = [5900, 3000, 7800, 4200, 6800, 4500, 3900];
  var data5 = [20000, 39000, 22000, 23000, 22000, 44000, 25000, 21000, 35000, 41000, 28000]
  var data6 = [24000, 49000, 32000, 44000, 48000, 42000, 35000, 41000, 25000, 51000, 38000]
  var array = [1300, 2300, 3400, 4200, 7100, 8000, 9700, 10800, 11800, 12800];
  var array1 = [16470, 16470, 16470, 16470, 16470, 16470, 16470, 16470, 16470, 16470];

  //线图1
  var options1 = {
    backgroundColor: 'none',
    tooltip: {
      trigger: 'axis',
      formatter: function(params) {
        return params[0].axisValueLabel + '<br/>' + '人数：' + params[0].value
      },
      backgroundColor: ' rgba(0,255,255,0.3)',
      padding: 9,
      textStyle: {
        fontSize: 14,
        color: '#fff',
      },
      extraCssText: 'box-shadow: 0 2px 4px 0 rgba(0,0,0,0.12), 0 0 6px 0 rgba(0,0,0,0.04);border-radius: 2px;',
    },
    title: {
      text: '未来三天',
      textStyle: {
        color: '#DBDAEA',
        fontSize: 14,
      },
      right: '14%',
      bottom: '40%'
    },
    grid: {
      top: '5%',
      left: '6%',
      right: '8%',
      bottom: '10%',
      containLabel: true //grid 区域包含坐标轴的刻度标签。
    },
    xAxis: [{
      type: 'category',
      boundaryGap: false,
      data: ['09-18', '09-19', '09-20', '09-21', '09-22', '09-23', '09-24'],
      axisTick: {
        show: false //柱子剧中对齐
      },
      axisLabel: {
        textStyle: {
          color: '#9a9bae',
        } //刻度标签文字颜色
      },
      axisLine: {
        lineStyle: {
          color: 'rgba(0,255,255,0.19)'
        }
      }
    }],
    yAxis: [{
      type: 'value',
      axisLabel: {
        textStyle: {
          color: '#9a9bae',
        }, //刻度标签文字颜色
      },
      splitNumber: 4,
      axisTick: {
        show: false
      }, //取消坐标中间刻度
      axisLine: {
        show: false
      },
      splitLine: {
        lineStyle: {
          color: 'rgba(0,255,255,0.19)',
        },
      },
    }],
    series: [{
      name: '前四天人数',
      type: 'line',
      itemStyle: {
        normal: {
          color: '#E1E579',
        }
      },
      areaStyle: {
        normal: {
          color: '#1B436C'
        }
      },
      data: data2.slice(0, 5)
    }, {
      name: '未来三天',
      type: 'line',
      itemStyle: {
        normal: {
          color: '#E1E579',
        }
      },
      areaStyle: {
        normal: {
          color: '#1F3933'
        }
      },
      data: ['-', '-', '-', '-'].concat(data2.slice(4))
    } ]
  };
  //柱图1
  var options2 = {
    tooltip: {
      trigger: 'axis',
      backgroundColor: ' rgba(0,255,255,0.2)',
      padding: 9,
      textStyle: {
        fontSize: 14,
        color: '#fff',
      },
      axisPointer: { // 坐标轴指示器，坐标轴触发有效
        type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
      },
      extraCssText: 'box-shadow: 0 2px 4px 0 rgba(0,0,0,0.12), 0 0 6px 0 rgba(0,0,0,0.04);border-radius: 2px;',
      formatter: function(params) {
        return params[0].seriesName + params[0].name + '<br/>' + '人数：' + params[0].value + '<br/>' +
        params[2].seriesName + params[2].name + '<br/>' + '人数：' + params[2].value
      }
    },
    legend: {
      show: true,
      right: '7%',
      top: '2%',
      orient: "horizontal",
      selectedMode: false,
      textStyle: {
        color: '#fff'
      },
      data: ['2016年', '2017年']
    },
    grid: {
      left: '3%',
      right: '7%',
      bottom: '10%',
      containLabel: true //grid 区域包含坐标轴的刻度标签。
    },
    xAxis: [{
      type: 'category',
      data: ['元旦', '春节', '清明节', '劳动节', '端午节', '中秋节', '国庆'],
      boundaryGap: ['10%', '20%'],
      axisTick: {
        show: false,
      },
      axisLine: {
        lineStyle: {
          color: 'rgba(0,255,255,0.19)',
        }, //坐标轴在 grid 区域中的分隔线颜色
      },
      axisLabel: {
        textStyle: {
          color: '#9a9bae',
        } //刻度标签文字颜色
      }
    }],
    yAxis: [{
      type: 'value',
      splitNumber: 5,
      axisLabel: {
        textStyle: {
          color: '#9a9bae',
        }, //刻度标签文字颜色
      },
      axisTick: {
        show: false
      }, //取消坐标中间刻度
      axisLine: {
        lineStyle: {
          color: 'rgba(0,255,255,0.19)',
        }
      },
      splitLine: {
        lineStyle: {
          color: 'rgba(0,255,255,0.19)',
        }, //坐标轴在 grid 区域中的分隔线颜色
      },
    }],
    series: [{
        name: '2016年',
        type: 'bar',
        barWidth: '20%',
        itemStyle: {
          normal: {
            color: 'rgba(74,114,255,0.58)',
            borderColor: '#4A72FF'
          },
        },
        data: data3
      },
      {
        name: '2016年',
        type: 'line',
        showSymbol: false,
        itemStyle: {
          normal: {
            color: '#00FFFF',
          },
        },
        data: _.map(data3, function(item) { return item / 2 + 5000})
      },
      {
        name: '2017年',
        type: 'bar',
        barWidth: '20%',
        itemStyle: {
          normal: {
            color: 'rgba(248,231,28,0.64)',
            borderColor: '#F8E71C'
          },
        },
        data: data4
      }, {
        name: '2017年',
        type: 'line',
        label: {
          emphasis: {
            show: false
          }
        },
        itemStyle: {
          normal: {
            color: '#4A72FF',
          },
        },
        data: _.map(data4, function(item) { return item / 2 + 5000})
      }
    ]
  };

  //线图2
  var options4 = {
    backgroundColor: 'none',
    tooltip: {
      trigger: 'axis',
      backgroundColor: ' rgba(0,255,255,0.2)',
      padding: 9,
      textStyle: {
        fontSize: 14,
        color: '#fff',
      },
      extraCssText: 'box-shadow: 0 2px 4px 0 rgba(0,0,0,0.12), 0 0 6px 0 rgba(0,0,0,0.04);border-radius: 2px;',
      axisPointer: { // 坐标轴指示器，坐标轴触发有效
        type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
      }
    },
    dataZoom: {
      "show": true,
      "height": 12,
      "xAxisIndex": [0],
      bottom: 30,
      left: 70,
      "start": 0,
      "end": 100,
      handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
      handleSize: '100%',
      handleStyle: {
        color: "#618ffd",
      },
      textStyle: {
        color: "#fff"
      },
      fillerColor: '#3b4875',
      borderColor: "#4f516c"

    },
    grid: {
      top: '10%',
      left: '2%',
      right: '5%',
      bottom: '18%',
      containLabel: true //grid 区域包含坐标轴的刻度标签。
    },
    xAxis: [{
      type: 'category',
      data: ['09-07', '09-08', '09-09', '09-10', '09-11', '09-12', '09-13', '09-14', '09-15', '09-16', '09-17'],
      axisTick: {
        alignWithLabel: true //柱子剧中对齐
      },
      boundaryGap: false,
      axisLabel: {
        textStyle: {
          color: '#9a9bae',
        }
      },
      axisLine: {
        show: false
      },
    }],
    yAxis: [{
      type: 'value',
      axisLabel: {
        margin: 16,
        textStyle: {
          color: '#9a9bae',
        }, //刻度标签文字颜色
      },
      axisTick: {
        show: false
      }, //取消坐标中间刻度
      axisLine: {
        show: false
      },
      splitLine: {
        lineStyle: {
          color: 'rgba(0,255,255,0.19)',
        }, //坐标轴在 grid 区域中的分隔线颜色
      },
    }],
    series: [{
      name: '峨眉山客流量',
      type: 'line',
      itemStyle: {
        normal: {
          color: '#63D948',
        }
      },
      areaStyle: {
        normal: {
          color: 'rgba(99,217,72,0.6)'
        }
      },
      data: data5
    }, {
      name: '乐山大佛客流量',
      type: 'line',
      itemStyle: {
        normal: {
          color: '#358CFF',
        },
      },
      areaStyle: {
        normal: {
          color: '#214074'
        }
      },
      data: data6
    }]
  };

  //横轴柱图1
  var options5 = {
    grid: {
      top: '0%',
      left: '8%',
      right: '8%',
      bottom: '4%',
      containLabel: true //grid 区域包含坐标轴的刻度标签。
    },
    xAxis: [{
      type: 'value',
      axisTick: {
        show: false
      },
      splitLine: {
        show: false
      },
      axisLine: {
        show: false
      },
      axisLabel: {
        show: false
      }
    }],
    yAxis: [{
      type: 'category',
      data: ['北京故宫', "八达岭长城", '天坛', '鸟巢', '香山', '北京故宫', "八达岭长城", '天坛', '鸟巢', '香山', ],
      axisLabel: {
        margin: 20,
        textStyle: {
          color: '#9a9bae',
        }, //刻度标签文字颜色
      },
      axisTick: {
        show: false
      }, //取消坐标中间刻度
      axisLine: {
        show: false
      },
      splitLine: {
        lineStyle: {
          color: '#343448',
        }, //坐标轴在 grid 区域中的分隔线颜色
      },
    }],
    series: [{
      name: '月开支',
      type: 'bar',
      barWidth: '50%',
      label: {
        normal: {
          textStyle: {
            color: '#682d19'
          },
          position: 'left',
          show: false,
          formatter: '{b}'
        }
      },
      itemStyle: {
        normal: {
          color: 'rgba(74,114,255,0.14)',
          borderColor: 'rgba(74,114,255,0.33)'
        }
      },
      data: array1
    }, {
      type: 'bar',
      silent: true,
      barGap: '-100%',
      barWidth: '50%',
      label: {
        normal: {
          show: true,
          position: 'insideLeft',
          color: '#ffffff',
          fontSize: 12,
          formatter: function(params) {
            return params.value / 10000 + '万人'
          }
        }
      },
      data: array,
      itemStyle: {
        normal: {
          color: 'rgba(55,201,54,0.60)',
          borderWidth: 1,
          borderColor: '#37C936'
        }
      },

    }]
  };


  if (type == 'line') {
    myChart.setOption(options1);
  } else if (type == 'bar') {
    myChart.setOption(options2);
  } else if (type == 'bar-a') {
    myChart.setOption(options5);
  } else if (type == 'line-a') {
    myChart.setOption(options4);
  }
  window.onresize = myChart.resize;

  return myChart
}
